<template>
	<view class="content">
	<u-navbar title="我的账号" :autoBack="true" :placeholder="true" ></u-navbar>
		<view class="user-box">
			<u-cell-group :border='false'>
				<u-cell title="头像" :isLink="true" :border='false' name="head">
					<view  slot="value" class="u-slot-value">
						<button open-type="chooseAvatar" @chooseavatar="avatarbtn" class="hide-button"></button>
						<image :src="modifyuser.avatar" mode=""></image>
					</view>
				</u-cell>
				<u-cell title="用户名" :isLink="true" :border="false" name="username">
				  <view slot="value" class="u-slot-name">
					<u-input :border="false" :maxlength="11" inputAlign="right" v-model="modifyuser.nickname"></u-input>
				  </view>
				</u-cell>
				<u-cell title="手机号" :isLink="true" :border='false' name="phone">
					<view slot="value" class="u-slot-phone">
						<u-input :border='false' disabledColor="#fff" :maxlength='11' disabled inputAlign="right" v-model="modifyuser.phone"></u-input>
					</view>
				</u-cell>
			</u-cell-group>
		</view>
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex'
	import http from '@/utils/http.js'
	import {uploadimage} from '@/utils/upload.js'
	export default{
		data(){
			return{
				modifyuser:{}
			}
		},
		computed:{
			...mapState(['userinfo']),
		},
		methods:{
			async avatarbtn(el){
				const res = await uploadimage(el.detail.avatarUrl)
				this.modifyuser.avatar = res.url
			},
			async accoutapi(){
				await http({
					url:'/user/set_avatar',
					method:'PUT',
					data:this.modifyuser
				})
					await http({
					url:'/user/set_name',
					method:'PUT',
					data:this.modifyuser
				})
			},
		},
		onUnload() {
			if(this.modifyuser.nickname !== this.userinfo.nickname || this.modifyuser.avatar !== this.userinfo.avatar){
				this.accoutapi()
				this.$bus.$emit('upinfo')
			}
		},
		onShow() {
			this.modifyuser = this.userinfo
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #fafafa;
	}
	.data-v-fdbb9fe6{
		width: 200rpx;
	}
	.hide-button{
	  opacity: 0;
	  width: 100%;
	  height: 100%;
	  position: absolute;
	  top: 0;
	  left: 0;
	}
	.u-slot-value{
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		image{
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		}
	}
	.user-box{
		background-color: #fff;
		margin-top: 20rpx;
	}
</style>